<template>
    <div class="chat-container">
        <van-nav-bar style="position: absolute;width: 100vw" :title="showFriendNickname" left-text="返回" left-arrow
            @click-left="onClickLeft" />
        <!-- 聊天记录区域 -->
        <ol class="chat" v-for="(item, index) in showTemporaryChatRecord" :key="index">
            <li :class="{ 'other': item.senderId === userId, 'self': item.senderId === showFriendId }">
                <div class="avatar"><img :src="showUserAvatar" draggable="false" /></div>
                <div class="msg">
                    <p>{{ item.content }}</p>
                    <!-- <img v-if="item.imgUrl" :src="item.imgUrl" draggable="false" /> -->
                </div>
            </li>
        </ol>

        <!-- 输入框和发送按钮 -->
        <div class="input-group">
            <input type="text" class="form-control" placeholder="输入消息..." v-model="message" />
            &nbsp;
            <button class="btn-primary" @click="handleClick">发送</button>
        </div>
    </div>
</template>


<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref, computed, watch } from 'vue';
import { useUserStore, useFriendListStore, useChatStore } from '@/stores/UserStore';

const showTemporaryChatRecord = ref([]) as any;

onMounted(() => {
    // 临时消息
    const showTemporaryChatRecords = useChat.$state.temporaryChatRecords;
    console.log(showTemporaryChatRecords);


    if (showTemporaryChatRecords.length !== 0) return
    // showTemporaryChatRecords.forEach((item: any) => {
    //     if (item.senderId === userId.value && item.receiverId === showFriendId.value) {
    //         showTemporaryChatRecord.value.push(item);
    //     }
    // })



})



const onClickLeft = () => history.back();

const route = useRoute();
const router = useRouter();

const useUser = useUserStore();
const useFriendList = useFriendListStore();
const useChat = useChatStore();

// 当前对话用户
const FriendId = ref(route.params.friendId as string);
// 当前登录用户
const userId = ref(useUser.$state.userObj.userId);
// 消息
const message = ref('');



// 显示登录用户头像
const showUserAvatar = useUser.$state.userObj.avatar;
// 显示登录用户昵称
const showUserUsername = useUser.$state.userObj.username;



// 当前对话好友信息
const currentFriend = computed(() => {
    if (!FriendId.value) return undefined;
    return useFriendList.$state.friendList.find(friend => friend.friendId === FriendId.value);
});
// { _id: '6617bbcdf9028f744d6148fc', userId: '6617ba9510f23674f6681a43', friendId: '6617ba9c10f23674f6681a45', friendNickname: '123', friendAvatar: 'https://img.zcool.cn/community/01a06a5796ccd20000012e7e50f0db.jpg@1280w_1l_2o_100sh.jpg', … }


// 当前对话好友id
const showFriendId = computed(() => currentFriend.value?.friendId ?? '');
// 当前对话好友头像
const showFriendAvatar = computed(() => currentFriend.value?.friendAvatar ?? '');
// 当前对话好友昵称
const showFriendNickname = computed(() => currentFriend.value?.friendNickname ?? '');




// 发送消息
const handleClick = () => {
    const userInfo = {
        senderId: userId.value,
        receiverId: FriendId.value,
        content: message.value
    };
    useChat.connectToSocket(userInfo);
    message.value = '';
}

// 消息发送时间
const formatTimestamp = (timestamp: number): string => {
    return new Date(timestamp).toLocaleString(); // 简单使用本地化的日期时间格式
};


watch(
    () => useChat.$state.temporaryChatRecords,
    (newUserId) => {
        console.log(newUserId);
    }
);
</script>


<style scoped>
.chat-container {
    width: 100vw;
    height: 100vh;
}

.input-group {
    text-align: center;
    width: 100vw;
    height: 10vh;
    background-color: rgb(255, 255, 255);
    position: absolute;
    bottom: 0;
}

.form-control {
    margin-top: 10px;
}

.btn-primary {
    margin-top: 10px;
}



.chat {
    list-style: none;
    background: none;
    margin: 0;
    /* padding: 0 0 50px 0; */
    /* margin-top: 60px; */
    margin-bottom: 10px;
}

.chat li {
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
}

.chat .avatar {
    width: 40px;
    height: 40px;
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}

.chat .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.chat .day {
    position: relative;
    display: block;
    text-align: center;
    color: #c0c0c0;
    height: 20px;
    text-shadow: 7px 0px 0px #e5e5e5, 6px 0px 0px #e5e5e5, 5px 0px 0px #e5e5e5, 4px 0px 0px #e5e5e5, 3px 0px 0px #e5e5e5, 2px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 0px 0px 0px #e5e5e5, -1px 0px 0px #e5e5e5, -2px 0px 0px #e5e5e5, -3px 0px 0px #e5e5e5, -4px 0px 0px #e5e5e5, -5px 0px 0px #e5e5e5, -6px 0px 0px #e5e5e5, -7px 0px 0px #e5e5e5;
    box-shadow: inset 20px 0px 0px #e5e5e5, inset -20px 0px 0px #e5e5e5, inset 0px -2px 0px #d7d7d7;
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.other .msg {
    order: 1;
    border-top-left-radius: 0px;
    box-shadow: -1px 2px 0px #D4D4D4;
}

.other:before {
    content: "";
    position: relative;
    top: 0px;
    right: 0px;
    left: 40px;
    width: 0px;
    height: 0px;
    border: 5px solid #fff;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.self {
    justify-content: flex-end;
    align-items: flex-end;
}

.self .msg {
    order: 1;
    border-bottom-right-radius: 0px;
    box-shadow: 1px 2px 0px #D4D4D4;
}

.self .avatar {
    order: 2;
}

.self .avatar:after {
    content: "";
    position: relative;
    display: inline-block;
    bottom: 19px;
    right: 0px;
    width: 0px;
    height: 0px;
    border: 5px solid #fff;
    border-right-color: transparent;
    border-top-color: transparent;
    box-shadow: 0px 2px 0px #D4D4D4;
}

.msg {
    background: white;
    min-width: 50px;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}

.msg p {
    font-size: 0.8rem;
    margin: 0 0 0.2rem 0;
    color: #777;
}

.msg img {
    position: relative;
    display: block;
    width: 450px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px #eee;
    transition: all .4s cubic-bezier(0.565, -0.260, 0.255, 1.410);
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@media screen and (max-width: 800px) {
    .msg img {
        width: 300px;
    }
}

@media screen and (max-width: 550px) {
    .msg img {
        width: 200px;
    }
}

.msg time {
    font-size: 0.7rem;
    color: #ccc;
    margin-top: 3px;
    float: right;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.msg time:before {
    content: "\f017";
    color: #ddd;
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 4px;
}

@-webikt-keyframes pulse {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

::-webkit-scrollbar {
    min-width: 12px;
    width: 12px;
    max-width: 12px;
    min-height: 12px;
    height: 12px;
    max-height: 12px;
    background: #e5e5e5;
    box-shadow: inset 0px 50px 0px rgba(82, 179, 217, 0.9), inset 0px -52px 0px #fafafa;
}

::-webkit-scrollbar-thumb {
    background: #bbb;
    border: none;
    border-radius: 100px;
    border: solid 3px #e5e5e5;
    box-shadow: inset 0px 0px 3px #999;
}

::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
    box-shadow: inset 0px 0px 3px #888;
}

::-webkit-scrollbar-thumb:active {
    background: #aaa;
    box-shadow: inset 0px 0px 3px #7f7f7f;
}

::-webkit-scrollbar-button {
    display: block;
    height: 26px;
}
</style>